<template>
	<view style="padding: 40rpx;">
		<u-form labelPosition="left":model="userInfo" :rules="rules" ref="uForm" labelWidth="100">
			<u-form-item label="姓名" prop="name" borderBottom>
				<u-input v-model="userInfo.name" placeholder="请输入姓名" border="none"></u-input>
			</u-form-item>
			<u-form-item label="身份证号" prop="idcard" borderBottom>
				<u-input v-model="userInfo.idcard" placeholder="请输入身份证号" border="none"></u-input>
			</u-form-item>
			<u-form-item label="身份类型" prop="userType" borderBottom>
				<view @click="userTypeShow = true" style="color: gray; font-weight: 800; display: flex; justify-content: space-between;align-items: center;">
					<view>{{ userTypeName || '--请选择--' }}</view>
					<u-icon name="arrow-down" color="#ccc" size="16" bold></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="手机号" prop="phone" borderBottom>
				<u-input :disabled="true" v-model="userInfo.phone" placeholder="请输入手机号" border="none">
					<template slot="suffix">
						<!-- <button @tap="handleGetPhone" type="success" size="mini">获取手机号</button> -->
						<button size="mini" type="primary" open-type="getPhoneNumber" @getphonenumber="handleGetUserInfo">获取手机号</button>
					</template>
				</u-input>
			</u-form-item>
		</u-form>
		<view style="margin-top: 60rpx;">
			<u-button @click="handleOpenPopup" type="primary" text="保存"></u-button>
		</view>
		<u-popup :show="popupShow" mode="center" round="8">
			<view style="width: 650rpx; padding: 0 20rpx; box-sizing: border-box;">
				<view class="important-tip">信息核对</view>
				
				<view class="important-info">
					<view class="info-width">姓名</view>
					<view class="info-text">{{ userInfo.name }}</view>
				</view>
				<view class="important-info">
					<view class="info-width">身份证号</view>
					<view class="info-text">{{ userInfo.idcard }}</view>
				</view>
				
				<view class="important-info">
					<view class="info-width">身份类型</view>
					<view class="info-text">{{ userTypeName }}</view>
				</view>
				
				<view class="important-info">
					<view class="info-width">手机号</view>
					<view class="info-text">{{ userInfo.phone }}</view>
				</view>
				
				
				<view class="important-text" v-html="registerTipHtml"></view>
				<view class="important-btn">
					<view style="width: 50%;margin-right: 20rpx;">
						<u-button plain type="primary" @click="handleClosePopup">返回修改</u-button>
					</view>
					<view style="width: 50%;">
						<u-button type="primary" :disabled="submitBtn != '立即保存'" @click="handleSubmit">
							<view>
								{{ submitBtn }}
							</view>
						</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="tipShow" mode="center" round="8">
			<view style="width: 650rpx; padding: 0 20rpx; box-sizing: border-box;">
				<view class="important-tip">用户提示</view>
				<scroll-view :scroll-y="true" style="height: 600rpx;">
					<view class="important-text" v-html="userNoticeHtml"></view>
				</scroll-view>
				
				<view class="important-btn">
					<view>
						<u-checkbox-group v-model="checkboxValue" placement="column">
							<u-checkbox :customStyle="{marginBottom: '16rpx'}" label="我已阅读并同意上述条款" name="我已阅读并同意上述条款"></u-checkbox>
						</u-checkbox-group>
					</view>
					<button size="mini" @click="tipShow = false" :disabled="checkboxValue.length == 0 || userNoticeBtn != '确认'" type="primary">{{userNoticeBtn}}</button>
					<!-- <button size="mini" :disabled="checkboxValue.length == 0 || userNoticeBtn != '确认'" type="primary" open-type="getPhoneNumber" @getphonenumber="handleGetUserInfo">{{userNoticeBtn}}</button> -->
				</view>
			</view>
		</u-popup>
		<u-picker :show="userTypeShow" :columns="[userTypeArr]" keyName="name" @cancel="userTypeShow = false" @confirm="handleUserTypeValue"></u-picker>
		<u-overlay :show="loadingShow"></u-overlay>
		<u-loading-icon :show="loadingShow"></u-loading-icon>
	</view>
</template>

<script>
	import { userIDcardType, registerTip, perfectUserInfo, userNoticeNew, wxCodeGetUserPhone, typeOfNameAndIdCard } from '../utils/methods.js'
	export default {
		onShareAppMessage(res) {
			return {
			  title: '石家庄不动产中心',
			  path: '/pages/index'
			}
		},
		onReady() {
		    this.$refs.uForm.setRules(this.rules)
		},
		data() {
			return {
				checkboxValue: [],
				timeVlue: 0,
				userNoticeBtn: '确认10',
				userNoticeTimer: null,
				submitTimer: null,
				submitBtn: '立即保存5',
				tipShow: false,
				timeValue: 0,
				loadingShow: false,
				popupShow: false,
				userInfo: {
					name: '',
					phone: '',
					idcard: '',
					userType: '',
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					phone: [
						{
							type: 'string',
							required: true,
							message: '请填写手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change','blur'],
						}
					],
					
					idcard: [
						{
							type: 'string',
							required: true,
							message: '请填写身份证号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								//let idCard15 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/
								//let idCard18 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
								
								let code = value //value 为你输入的身份证  
								let city = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江 ", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏 ", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外 " }; 
								let tip = ""; 
								let pass = true; 
								let reg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/; 
								if(!code || !code.match(reg)) { 
									// tip = "身份证号格式错误"; 
									pass = false
								} else if (!city[code.substr(0, 2)]) { 
									// tip = "身份证号格式错误"; 
									pass = false
								} else {
									//18位身份证需要验证最后一位校验位 
									if (code.length == 18) { 
										code = code.split('');   
										//加权因子  
										 let factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];  
										//校验位  
										let parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];  
										let sum = 0;  
										let ai = 0;  
										let wi = 0;  
										for (let i = 0; i < 17; i++) {   
											ai = code[i];   
											 wi = factor[i];   
											sum += ai * wi;  
										 }  
										let last = parity[sum % 11];  
										if (parity[sum % 11] != code[17]) {   
											// tip = "身份证号格式错误";   
											pass = false
										 }  
									} 
								 }
								return pass
								// return idCard15.test(value) || idCard18.test(value)
							},
							message: '身份证号格式错误',
							trigger: ['change','blur'],
						}
					],
					userType: {
						type: 'number',
						required: true,
						message: '请选择身份类型',
						trigger: ['change']
					},
				},
				registerTipHtml: '',
				userNoticeHtml: '',
				userTypeArr: [],
				userTypeShow: false,
				userTypeName: '',
			};
		},
		methods: {
			handleUserTypeValue(value) {
				this.userInfo.userType = value.value[0].id
				this.userTypeName = value.value[0].name
				this.userTypeShow = false
			},
			// 获取身份类型
			handleGetUserIdCardType() {
				userIDcardType().then(res => {
					if(res.data.code == 0) {
						this.userTypeArr = res.data.data
						this.userTypeArr.forEach(item => {
							// 默认选中权利人
							if(item.id == '1') {
								this.userInfo.userType = item.id
								this.userTypeName = item.name
							}
						})
					}
				})
			},
			// 获取用户信息
			handleGetUserInfo(e) {
				if(e.detail.errMsg === "getPhoneNumber:ok") {
					wxCodeGetUserPhone({code: e.target.code}).then(Info => {
						if(Info.data.code === 0) {
							this.userInfo.phone = Info.data.data.phone
						}
					})
				}else {
					uni.showToast({
						title: '授权失败请重新授权',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			handleSubmitTime() {
				if(this.submitTimer) {
					clearInterval(this.submitTimer)
				}
				this.submitTimer = setInterval(() => {
					if(this.timeValue === 0) {
						clearInterval(this.submitTimer)
						this.submitBtn = '立即保存'
						return
					}
					this.submitBtn = '立即保存' + String(this.timeValue)
					this.timeValue--
				}, 1000)
			},
			handleUserNoticeTime() {
				if(this.userNoticeTimer) {
					clearInterval(this.userNoticeTimer)
				}
				this.userNoticeTimer = setInterval(() => {
					if(this.timeVlue === 0) {
						clearInterval(this.userNoticeTimer)
						this.userNoticeBtn = '确认'
						return
					}
					this.userNoticeBtn = '确认' + String(this.timeVlue)
					this.timeVlue--
				}, 1000)
			},
			handleClosePopup() {
				this.popupShow = false
			},
			handleOpenPopup() {
				this.$refs.uForm.validate().then(res => {
					typeOfNameAndIdCard(this.userInfo).then(res => {
						if(res.data.code === 0) {
							this.handleRegisterTip()
						}else {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none'
							});
						}
					})
				}).catch(err => {})
			},
			handleRegisterTip() {
				registerTip().then(res => {
					if(res.data.code == 0) {
						this.registerTipHtml = res.data.data.html
						if(res.data.data.time > 0) {
							this.timeValue = res.data.data.time
							this.handleSubmitTime()
						}else {
							this.submitBtn = '立即保存'
						}
						this.popupShow = true
					}
				})
			},
			handleOpenUserNotice() {
				userNoticeNew().then(res => {
					if(res.data.code === 0) {
						this.userNoticeHtml = res.data.data.html
						if(res.data.data.time > 0) {
							this.timeVlue = res.data.data.time
							this.handleUserNoticeTime()
						}else {
							this.userNoticeBtn = '确认'
						}
						this.tipShow = true
					}
				})
			},
			handleSubmit() {
				this.popupShow = false
				this.loadingShow = true
				perfectUserInfo(this.userInfo).then(res => {
					if(res.data.success) {
						this.loadingShow = false
						uni.showToast({
							title: '成功',
							duration: 2000,
							success: () => {
								let timer1 = setTimeout(() => {
									uni.reLaunch({url: '/pages/index'})
								}, 2000)
							}
						});
					}else {
						this.loadingShow = false
						uni.showToast({
							title: '失败',
							duration: 2000,
							icon: 'none'
						});
					}
				})
			}
		},
		mounted() {
			// this.handleRegisterTip()
			this.handleOpenUserNotice()
			this.handleGetUserIdCardType()
		}
	}
</script>

<style lang="less">
	.important-tip {
		text-align: center;
		font-size: 40rpx;
		padding: 20rpx 0;
		font-weight: 800;
		border-bottom: 1px solid #f3f3f3;
	}
	.important-info {
		box-sizing: border-box;
		width: 100%;
		display: flex;
		align-items: center;
		margin: 10rpx;
		padding-right: 10rpx;
		.info-width {
			box-sizing: border-box;
		}
		.info-text {
			text-align: right;
			flex: auto;
		}
	}
	.important-text {
		padding: 20rpx 0;
		color: red;
		font-weight: 800;
		font-size: 30rpx;
	}
	.important-btn {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx 0;
	}
</style>
